<template>
  <div class="echart-container">
    <!--气象-->
    <div class="echart-box">
      <div class="hd">
        <div class="l-box">
          <i class="el-icon-cloudy"></i><span class="name">气象</span>
        </div>
        <div class="r-box"></div>
      </div>
      <div class="bd">
        <span class="corner-top"></span>
        <span class="corner-bottom"></span>
        <div class="inner-box">
           <sensor></sensor>
        </div>
      </div>
    </div>
    <!--监控-->
    <div class="echart-box">
      <div class="hd">
        <div class="l-box">
          <i class="el-icon-view"></i><span class="name">监控</span>
        </div>
        <div class="r-box"></div>
      </div>
      <div class="bd">
        <span class="corner-top"></span>
        <span class="corner-bottom"></span>
        <div class="inner-box">
          <monitor></monitor>
        </div>
      </div>
    </div>
    <!--告警统计-->
    <div class="echart-box">
      <div class="hd">
        <div class="l-box">
          <i class="el-icon-pie-chart"></i><span class="name">告警统计</span>
        </div>
        <div class="r-box"></div>
      </div>
      <div class="bd">
        <span class="corner-top"></span>
        <span class="corner-bottom"></span>
        <div class="inner-box">
          <doughnut></doughnut>
        </div>
      </div>
    </div>
    <!--能耗分析-->
    <div class="echart-box">
      <div class="hd">
        <div class="l-box">
          <i class="el-icon-s-data"></i><span class="name">能耗分析</span>
        </div>
        <div class="r-box"></div>
      </div>
      <div class="bd">
        <span class="corner-top"></span>
        <span class="corner-bottom"></span>
        <div class="inner-box">
          <basicbar></basicbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sensor from './sensor/index.vue';
import monitor from './monitor/index.vue';
import doughnut from './doughnut/index.vue';
import basicbar from './basicbar/index.vue';
export default {
  components:{
    //气象
    sensor,
    //监控
    monitor,
    //告警统计
    doughnut,
    //能耗分析
    basicbar
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.echart-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 370px;
  padding: 60px 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.9) 10%,
    rgba(0, 0, 0, 0.6) 90%,
    rgba(0, 0, 0, 0)
  );
  z-index: 1;
  .echart-box {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    .hd {
      display: flex;
      height: 44px;
      .l-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        i {
          margin-right: 6px;
          font-size: 24px;
          color: $main_color;
        }
        .name {
          font-size: 20px;
          color: $main_color;
        }
      }
    }
    .bd {
      position: relative;
      flex: 1 2 250px;
      background-color: rgba(0, 0, 0, 0.3);
      border: rgba($main_color, 0.3) 1px solid;
      box-shadow: 0 0 8px 0 rgba($main_color, 0.35);
      .inner-box {
        height: 226px;
        overflow: hidden;
      }
      &::before {
        display: block;
        content: "";
        position: absolute;
        top: -1px;
        right: 0;
        left: 0;
        height: 1px;
        background-image: linear-gradient(90deg, $main_color_2, $main_color 50%, $main_color_2);
        box-shadow: 0 0 6px 2px 6ccdff;
      }
    }
  }
}
</style>